<% step  ||= {} %>
<% index ||= 0 %>
<% step_prefix ||= 'tour[options][steps][]'.freeze %>

<div class='intro-admin__step'>
  <div class='intro-admin__step-header'>
    <div class='title'><%= t('intro.admin.component.step') %>-<%= content_tag :span, index + 1, class: 'js-intro-step-index' %></div>
    <div class='actions'>
      <% if index > 0 %>
        <i class='intro-admin__step-remove' title="<%= t('intro.admin.tips.remove_step') %>"></i>
      <% end %>
    </div>
  </div>

  <div class='intro-admin__step-content'>
    <%= render 'local_field',
      label: { name: :component_title, content: t('intro.admin.component.title') },
      input: { name: "#{step_prefix}[title]", object: step, attr: :title, options: { placeholder: t('intro.admin.placeholders.title') } }
    %>

    <%= render 'local_field',
      label: { name: :component_content, content: t('intro.admin.component.content') },
      input: { type: :textarea, name: "#{step_prefix}[content]", object: step, attr: :content, options: { placeholder: t('intro.admin.placeholders.content', class: 'content-textarea') } }
    %>

    <div class='two fields'>
      <div class='field'>
        <%= label_tag :component_image_url, t('intro.admin.component.image_url') %>
        <div class='input-group'>
          <%= text_field_tag "#{step_prefix}[image_url]", step['image_url'], placeholder: t('intro.admin.placeholders.image_url'), class: 'js-intro-admin__image-url' %>
          <%= button_tag t('intro.admin.upload'), class: 'intro-admin__button js-intro-admin__button-upload', type: :button %>
        </div>
        <%= hidden_field_tag "#{step_prefix}[image_width]", step['image_width'], class: 'js-intro-admin__image-width' %>
        <%= hidden_field_tag "#{step_prefix}[image_height]", step['image_height'], class: 'js-intro-admin__image-height' %>
      </div>

      <div class='field'>
        <%= label_tag :component_image_placement do %>
          <%= t('intro.admin.component.image_placement') %>
          <i class='intro-admin__question' title="<%= t('intro.admin.tips.image_placement') %>"></i>
        <% end %>
        <div class='intro-admin__select'>
          <%= select_tag "#{step_prefix}[image_placement]", options_for_select(t('intro.admin.component.image_placements').invert.to_a, (step['image_placement'] || 'top')) %>
        </div>
      </div>
    </div>

    <div class='fields'>
      <div class='eight wide field'>
        <%= label_tag :component_element, t('intro.admin.component.element') %>
        <%= text_field_tag "#{step_prefix}[element]", step['element'], placeholder: t('intro.admin.placeholders.element') %>
      </div>

      <div class='four wide field'>
        <%= label_tag :component_placement do %>
          <%= t('intro.admin.component.placement') %>
          <i class='intro-admin__question' title="<%= t('intro.admin.tips.placement') %>"></i>
        <% end %>
        <div class='intro-admin__select'>
          <%= select_tag "#{step_prefix}[placement]", options_for_select(t('intro.admin.component.placements').invert.to_a, (step['placement'] || 'top')), class: 'intro-admin__select' %>
        </div>
      </div>

      <div class='four wide field'>
        <%= label_tag :component_zindex, 'Z-Index' %>
        <%= number_field_tag "#{step_prefix}[z_index]", step['z_index'] || 99, placeholder: t('intro.admin.placeholders.zindex') %>
      </div>
    </div>

    <div class='field'>
      <div class='checkbox intro-admin__checkbox' data-scope="cancel-link">
        <%= check_box_tag "#{step_prefix}[cancel_link]", 1, step['cancel_link'], id: "intro-admin__step-cancel-link-#{index}" %>
        <%= label_tag "#{step_prefix}[cancel_link]", t('intro.admin.placeholders.cancel_link'), for: "intro-admin__step-cancel-link-#{index}" %>
      </div>
    </div>

    <div class='field'>
      <div class='checkbox intro-admin__checkbox' data-scope="fixed">
        <%= check_box_tag "#{step_prefix}[fixed_placement]", 1, step['fixed_placement'], id: "intro-admin__step-fixed-#{index}" %>
        <%= label_tag "#{step_prefix}[fixed_placement]", t('intro.admin.placeholders.fixed_placement'), title: t('intro.admin.tips.fixed_placement'), for: "intro-admin__step-fixed-#{index}" %>
      </div>
    </div>
  </div>
</div>